<template>
    <el-card :style="{height:`${height}px`}">
        <div slot="header" style="text-align: right">
            <el-button @click="editInfo('')">新增信息</el-button>
        </div>
        <el-row>
            <el-table
                :data="infoListData"
                style="width: 100%"
                :height="tableHeight"
                border
                v-loading="loading"
                ref="table"
            >
                <el-table-column label="标题">
                    <template slot-scope="scope">
                        {{ scope.row.title }}
                    </template>
                </el-table-column>

                <el-table-column label="修改时间">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.update_time }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="editInfo(scope.row.info_id)">编辑</el-button>

                        <el-button size="mini" type="danger" @click="deleteInfo(scope.row.info_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-row>
            <el-pagination
                background
                layout="total,sizes, prev, pager, next, jumper"
                :total="total"
                :current-page="page"
                @current-change="changePage"
                @prev-click="changePage"
                @next-click="changePage"
                @size-change="changeSize"
            ></el-pagination>
        </el-row>
    </el-card>
</template>

<script>
    import {getHeight} from "@/utils/regular";
    import {infoList,infoDelete} from '@/api/info'

    export default {
        name: "infoList",
        data() {
            return {
                height: 0,
                tableHeight: 500,
                infoListData: [],
                total: 0,
                page: 1,
                pagesize: 10,
                loading: false,
            }
        },
        created() {
            this.initSearch()
            this.height = getHeight() - 92
            this.tableHeight = getHeight() - 258
        },
        methods: {
            // 初始化搜索
            initSearch() {
                this.page = 1
                this.getInfoList()
            },
            // 页码数修改
            changeSize(pagesize) {
                this.pagesize = pagesize
                this.initSearch()
            },
            // 页数修改
            changePage(pagenum) {
                this.page = pagenum
                this.getInfoList()
            },
            // 获取列表
            getInfoList() {
                let params = {
                    pagesize: this.pagesize,
                    page: this.page,
                }
                this.loading = true
                infoList(params)
                    .then(res => {
                        if (Number(res.code) === 0) {
                            this.infoListData = res.data
                            this.page = res.page
                            this.total = res.count

                            this.$nextTick(() => {
                                this.$refs.table.bodyWrapper.scrollTop = 0
                            })
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                        this.loading = false
                    })
            },
            // 删除
            deleteInfo(info_id) {
                this.$Confirm({
                    message: '确定删除标签',
                    confirmButtonText: '立即删除',
                    success: () => {
                        infoDelete(info_id)
                            .then(res => {
                                if (Number(res.code) === 0) {
                                    this.initSearch()
                                    this.$Alert({message: res.msg, type: 'success'})
                                } else {
                                    this.$Alert({message: res.msg, type: 'error'})
                                }
                            })
                    }
                })
            },
            // 新增/编辑
            editInfo(info_id) {
                let url = info_id?`/admin/infoedit/${info_id}`:'/admin/infoadd'
                this.$router.push(url)
            },
        },
    }
</script>

<style scoped lang="less">
    .el-card {

        .el-row + .el-row {
            margin-top: 15px;
        }

        .el-color-picker {
            margin: 0 10px;
            display: inline-block;
            vertical-align: middle;
        }
    }
</style>
